<template>
  <div class="todo-header">
  <input type="text" placeholder="请输入" v-model='title' @keyup.enter="add">
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref,getCurrentInstance} from "@vue/runtime-core";
export default defineComponent({
  name:"Header",
  props:{
addTodo:{
    type:Function,
    require:true,
},
  },
  setup(props, ctx) {
  
//     let add=(e:KeyboardEvent)=>{ 自定义事件传值改变app
//     if(e.target?.value=='')return
//     let text:string=''
//     if(e.target){
//         text=e.target.value
//     }
//     ctx.emit('zj',text)
//    let ay:HTMLElement=document.getElementById('ap')
//       ay.value=''
//     }
    let title=ref('')
   let add=()=>{
    if(title.value=='')return
    props.addTodo?props.addTodo(title.value):''
    title.value=''
   }
      return {
        title,
        add
      } 
    },
})
</script>

<style>
.todo-header{
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
}
.todo-header input:focus{
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.8);
}
</style>